<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .box {
        border: 1px solid;
        width: 100px;
        height: 100px;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <h1>我是b页面</h1>
    <div class="box"></div>

    <script>
      //方法一

      //获取a页面传递的参数
      /* var color = window.location.search.slice("=")[1];
            console.log(color);
            //把color的颜色 设置个div就可以
            document.querySelector(".box").style.background = color; */

      //方法二
      //接受字符串 转成对象
      var str = window.location.search;
      //   console.log(str);
      //可以把queryString 参数转成对象 给我们一个固定格式的字符串  那么返还一个对象出来

      function s2o(str) {
        //第一步 把?去掉
        //1.slice  2 . substr  3.subString
        var res = str.slice(1);
        // console.log(res);
        //第二步 把字符串通过&号切割成数组
        var arr = res.split("&");
        // console.log(arr);
        //第三部循环数组  组成一个新对象
        var config = {};
        arr.forEach(function (item) {
          var lineArr = item.split("=");
          config[lineArr[0]] = lineArr[1];
        });
        console.log(config);
        return config;
      }
      s2o(str);
    </script>
  </body>
</html>
